<template>
	<a-card title="打印设计器">
		<div class="print-container">
			<div class="print-toolbar">
				<a-space>
					<a-select v-model:value="paperType" style="width: 200px" @change="handlePaperChange">
						<a-select-option v-for="item in paperTypes" :key="item.value" :value="item.value">
							{{ item.label }}
						</a-select-option>
					</a-select>

					<template v-if="paperType === 'custom'">
						<a-input-number v-model:value="customWidth" addon-after="mm" :min="50" :max="1000" />
						<a-input-number v-model:value="customHeight" addon-after="mm" :min="50" :max="1000" />
						<a-button type="primary" @click="applyCustomSize">应用</a-button>
					</template>

					<a-button type="primary" @click="handlePreview">预览</a-button>
					<a-button @click="handleExportPdf">导出PDF</a-button>
					<a-button @click="handlePrint">打印</a-button>
					<a-button danger @click="handleClear">清空</a-button>
				</a-space>
			</div>

			<div class="print-content">
				<div class="print-elements">
					<a-card title="元素列表" size="small">
						<div
							class="element-item"
							v-for="(element, index) in elements"
							:key="index"
							draggable="true"
							@dragstart="handleDragStart($event, element)"
						>
							{{ element.name }}
						</div>
					</a-card>
				</div>

				<div class="print-designer" id="hiprint-printTemplate-designer"></div>

				<div class="print-props">
					<a-card title="属性设置" size="small" v-if="selectedElement">
						<a-form :model="selectedElement.options" layout="vertical">
							<template v-if="selectedElement.type === 'text'">
								<a-form-item label="文本内容">
									<a-input v-model:value="selectedElement.options.text" />
								</a-form-item>
								<a-form-item label="字体大小">
									<a-input-number v-model:value="selectedElement.options.fontSize" :min="8" :max="72" />
								</a-form-item>
								<a-form-item label="颜色">
									<color-picker v-model:value="selectedElement.options.color" />
								</a-form-item>
								<a-form-item label="对齐方式">
									<a-select v-model:value="selectedElement.options.textAlign">
										<a-select-option value="left">左对齐</a-select-option>
										<a-select-option value="center">居中</a-select-option>
										<a-select-option value="right">右对齐</a-select-option>
									</a-select>
								</a-form-item>
							</template>

							<template v-else-if="selectedElement.type === 'table'">
								<a-form-item label="表格列">
									<a-button @click="addTableColumn">添加列</a-button>
									<div v-for="(column, index) in selectedElement.options.columns" :key="index" class="table-column-item">
										<a-input v-model:value="column.title" placeholder="列标题" />
										<a-input v-model:value="column.dataIndex" placeholder="字段名" />
										<a-button danger @click="removeTableColumn(index)">删除</a-button>
									</div>
								</a-form-item>
							</template>

							<template v-else-if="selectedElement.type === 'image'">
								<a-form-item label="图片URL">
									<a-input v-model:value="selectedElement.options.src" />
								</a-form-item>
							</template>

							<a-form-item>
								<a-button type="primary" @click="updateElement">更新</a-button>
								<a-button danger @click="removeElement">删除</a-button>
							</a-form-item>
						</a-form>
					</a-card>
				</div>
			</div>
		</div>
	</a-card>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, nextTick } from "vue";
import { initHiprint, paperTypes, defaultElements, createPrintTemplate, getDesigner, previewPrint } from "./printModule";
import { message } from "ant-design-vue";

export default defineComponent({
	name: "PrintDesigner",
	setup() {
		// 初始化 hiprint
		initHiprint();

		const paperType = ref("A4");
		const customWidth = ref(210);
		const customHeight = ref(297);
		const elements = ref(defaultElements);
		const selectedElement = ref<any>(null);
		const printTemplate = ref<any>(null);
		const designer = ref<any>(null);

		// 创建模板
		const initTemplate = () => {
			printTemplate.value = createPrintTemplate({
				paperType: paperType.value,
				customWidth: customWidth.value,
				customHeight: customHeight.value
			});

			nextTick(() => {
				designer.value = getDesigner("hiprint-printTemplate-designer");
				designer.value.init(printTemplate.value);

				// 监听元素选择
				designer.value.on("elementSelected", (element: any) => {
					selectedElement.value = element;
				});
			});
		};

		// 纸张类型变化
		const handlePaperChange = () => {
			initTemplate();
		};

		// 应用自定义尺寸
		const applyCustomSize = () => {
			initTemplate();
		};

		// 拖拽开始
		const handleDragStart = (event: DragEvent, element: any) => {
			event.dataTransfer?.setData("element", JSON.stringify(element));
		};

		// 预览
		const handlePreview = () => {
			previewPrint(printTemplate.value);
		};

		// 导出PDF
		const handleExportPdf = () => {
			printTemplate.value?.toPdf();
		};

		// 打印
		const handlePrint = () => {
			printTemplate.value?.print();
		};

		// 清空
		const handleClear = () => {
			printTemplate.value?.clear();
		};

		// 更新元素
		const updateElement = () => {
			if (selectedElement.value) {
				selectedElement.value.update();
				message.success("更新成功");
			}
		};

		// 删除元素
		const removeElement = () => {
			if (selectedElement.value) {
				selectedElement.value.remove();
				selectedElement.value = null;
			}
		};

		// 添加表格列
		const addTableColumn = () => {
			if (selectedElement.value && selectedElement.value.type === "table") {
				const columns = selectedElement.value.options.columns;
				columns.push({
					title: `列${columns.length + 1}`,
					dataIndex: `col${columns.length + 1}`
				});
			}
		};

		// 删除表格列
		const removeTableColumn = (index: number) => {
			if (selectedElement.value && selectedElement.value.type === "table") {
				selectedElement.value.options.columns.splice(index, 1);
			}
		};

		onMounted(() => {
			initTemplate();
		});

		return {
			paperTypes,
			paperType,
			customWidth,
			customHeight,
			elements,
			selectedElement,
			handlePaperChange,
			applyCustomSize,
			handleDragStart,
			handlePreview,
			handleExportPdf,
			handlePrint,
			handleClear,
			updateElement,
			removeElement,
			addTableColumn,
			removeTableColumn
		};
	}
});
</script>

<style scoped>
.print-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.print-toolbar {
	margin-bottom: 16px;
}
.print-content {
	display: flex;
	flex: 1;
	gap: 16px;
}
.print-elements {
	width: 200px;
}
.print-designer {
	flex: 1;
	min-height: 600px;
	border: 1px dashed #dddddd;
}
.print-props {
	width: 300px;
}
.element-item {
	padding: 8px;
	margin-bottom: 8px;
	cursor: move;
	background: #fafafa;
	border: 1px solid #eeeeee;
}
.table-column-item {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
</style>
